<template>
    <div id="box">
        <transition name="animation">
            <!--
            添加一个进入页面时的动画，flag为true时才会显示内容
            data 中有flag属性
            当进入页面后的100毫秒会将flag改为true从而触发动画效果

            -->
            <div class="top" v-show="flag" ref="card">

                <h1 class="title" ref="title">
                    专项附加扣除
                </h1>
                <el-card>
                    <div class="inout" ref="inout">
                        <el-button type="primary" size="mini" disabled>导入</el-button>
                        <download-excel
                            class="export-excel-wrapper"
                            :data="tableData"
                            :header="'专项附加扣除'"
                            name="专项附加扣除.xls"
                            style="display:inline-block;margin-left: 10px"
                        >
                            <el-button type="primary" size="mini">导出</el-button>
                        </download-excel>
                    </div>
                    <el-table :data="tableData" :max-height="tableHeight" stripe v-loading="loading">

                        <el-table-column fixed="left" label="序号" type="index" align="center"/>

                        <el-table-column fixed="left" label="名称" align="center">
                            <template v-slot="scope">
                                <el-button type="text" @click="$router.push({path:'deductInfo' ,query:{
                                        id: scope.row._id,
                                        idNumber:scope.row.idNumber,
                                        phone:scope.row.phone,
                                        jobNumber:scope.row.jobNumber,
                                        pname:scope.row.partId.pname,
                                        img:scope.row.img,
                                        username:scope.row.username,
                                    }
                                })">
                                    {{ scope.row.username }}
                                </el-button>
                            </template>
                        </el-table-column>


                        <el-table-column align="center" label="部门" prop="partId.pname"/>
                        <el-table-column align="center" label="电话号码" prop="phone" width="150"/>
                        <el-table-column align="center" label="工号" prop="jobNumber" width="200"/>
                        <el-table-column align="center" label="证件号" prop="idNumber" width="200"/>
                        <el-table-column label="入职日期" align="center" width="150">
                            <template v-slot="scope">
                                {{ scope.row.startTime |Day }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="累计子女教育" prop="children" width="150"/>
                        <el-table-column align="center" label="累计住房租金" prop="rent" width="150"/>
                        <el-table-column align="center" label="累计赡养老人" prop="provide" width="150"/>
                        <el-table-column align="center" label="累计继续教育" prop="continue" width="150"/>
                        <el-table-column align="center" label="小计" prop="sum"/>

                    </el-table>
                    <el-pagination
                        small
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="changePage"
                        background
                        prev-text="上一页"
                        next-text="下一页"
                        :style="{float:'right'}"
                        ref="page"
                    >
                    </el-pagination>
                </el-card>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag: false,
            loading: true,
            tableDataCopy: [],
            tableData: [],
            pageSize: 10,//一页有所少条数据
            page: 1,//当前页
            total: 0,//数据总数
            tableHeight: 0
        };
    },
    mounted() {
        this.flag = true
        this.$nextTick(() => {
            // nextTick确保了DOM元素创建后执行
            /*
             配置table的高度，右侧整体的高度减去除了table的所有盒子高度
             cart卡片的高度是撑满的，改变时table的高度。确保了卡片中的内容始终不会超出而带来的滚动条问题
             */

            let topheight = this.$refs.card.clientHeight;//内容的高度
            let titleheight = this.$refs.title.clientHeight;//标题的高度
            let pageheight = this.$refs.page.$el.clientHeight;//底部分页的高度
            let inoutheight = this.$refs.inout.clientHeight;//导入导出的高度


            this.tableHeight = topheight - titleheight - pageheight - inoutheight; //计算表格的高度
        })
        this.getData()
        setTimeout(() => {
            // 判断是否有数据，如果没有数据，提示服务器连接失败
            if (this.tableDataCopy.length === 0) {
                this.loading = false
                this.$message.error('服务器响应失败')
            }
        }, 5000)
    },
    methods: {
        async getData() {
            let {data} = await this.$axios.get('tax')
            this.tableDataCopy = data.data
            // 将全部数据赋值给tableDataCopy

            // 再将tableDataCopy切片出10条，赋值给tableData
            this.tableData = this.tableDataCopy.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
            this.total = this.tableDataCopy.length
            this.loading = false
            console.log(this.tableDataCopy);
        },
        changePage(page) {
            this.page = page
            this.loading = true
            this.getData()
        }
    },
}
</script>

<style lang="scss" scoped>


#box {
    height: 100%;
    overflow: hidden;

    .title {
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        line-height: 30px;
        background: #fff;
        border-bottom: 1px #f0f0f0 solid;
        font-weight: 600;

    }

    .animation-enter, animation-leave-to {
        transform: translateX(50px);
        opacity: 0;
    }

    .animation-enter-active {
        transition: all .5s ease-in-out;
    }

    .animation-enter-to, animation-leave {
        transform: translateX(0);
        opacity: 1;
    }

    .top {
        height: 100%;
        position: relative;

        .el-card {
            height: 100%;

            .inout {
                padding: 10px;
                box-sizing: border-box;
            }

            overflow-y: auto;

            ::v-deep .el-card__body {
                margin-top: 50px !important;
            }


        ;
        }
    }
}
</style>
